<template>
	<view class="container" :data-theme="theme">
		<!-- 头部 -->
		<view class="header">
			<!-- <view> -->
			<view class="bg_color" style="padding: 24rpx 24rpx;">
				<u-search v-model="keyword" @custom="searchProduct" @search="searchProduct" placeholder="请输入订单号"
					actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
			</view>
			<view style="background-color: #fff;">
				<view
					style="display: flex; flex-flow: row;justify-content: space-around; align-items: center; height: 40px;line-height: 40px;">

					<view style="display: flex;flex-flow: row;">
						<picker @change="bindPickerChange" @cancel="cancel" @click="clickPicker" :value="index"
							:range="arrayPicker" range-key="name" style="display: flex;">
							<view style="display: flex;">
								<view style="font-size: 14px;margin-right: 6rpx;">{{ arrayPicker[index].name }}
								</view>
								<u-icon :name="pickerShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="12"></u-icon>
							</view>
						</picker>

					</view>

					<view style="display: flex;flex-flow: row;">
						<picker @change="bindDateChange" @cancel="cancel" @click="clickDate" :value="indexDate"
							:range="arrayDate" range-key="name" style="display: flex;">
							<view style="display: flex;">
								<view style="font-size: 14px;margin-right: 6rpx;">{{ arrayDate[indexDate].name }}
								</view>
								<u-icon :name="dateShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="12"></u-icon>
							</view>
						</picker>
					</view>

					<view style="display: flex;flex-flow: row;margin-right: 20rpx;">
						<picker @change="warehouseChange" @cancel="warehouseCancel" @click="warehouseClick"
							:value="warehouseIndex" :range="warehouseList" range-key="depotName" style="display: flex;">
							<view style="display: flex;">
								<view style="font-size: 14px;margin-right: 6rpx;" v-if="isWarehouse">仓库选择
								</view>
								<view style="font-size: 14px;margin-right: 6rpx;" v-else='isWarehouse'>
									{{ warehouseList[warehouseIndex].depotName }}
								</view>
								<u-icon :name="warehouseShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="12"></u-icon>
							</view>
						</picker>

					</view>



				</view>
			</view>
		</view>
		<view class="content">
			<!-- 这里是可滚动的内容 -->
			<scroll-view class="scroll-view" scroll-y @scrolltolower="scrollHandle">
				<view class="scroll-view-inner">
					<!-- <view class="card" v-for="(order, index) in orderList" :key="index">
						<view class="card_header">
							<view>订单号：{{ order.orderNo }}</view>
							<view class="isFreight" v-if="order.status == 0" style="color: blue;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 1" style="color: orange;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 2" style="color: purple;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 3" style="color: green;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 4" style="color: red;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 5" style="color: #999999;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 6" style="color: magenta;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 9" style="color: pink;">
								{{ order.status | orderStatusFilter }}
							</view>
						</view>
						<view class="card_body">
							<view class="card_body_top">
								<view class="top_right">用户昵称 <span>{{ order.nickName }}</span> </view>
								<view class="top_right">实际支付 <span>￥{{ order.payPrice }}</span> </view>
								<view class="top_right">支付方式 <span>{{ order.payType | payTypeFilter }}</span> </view>
								<view class="top_right">下单时间 <span>{{ order.createTime }}</span> </view>
							</view>
						</view>
						<view class="card_footer">
							<button class="bg_color"
								style="padding: 6px 15px;color: white;border-radius: 50px;width: 100px;height: 34px; margin-right: 10px;"
								@click="goParticulars(order.orderNo)">查看详情</button>
							<button
								style="padding: 6px 15px;color: white;border-radius: 50px; width: 100px;height: 34px;"
								class="bg_color" @click="orderSendClick(order.orderNo)"
								v-if="(order.status === 1 || order.status === 2) && parseFloat(order.refundStatus) < 3">去发货</button>
						</view>
					</view> -->
					<view class="card" v-for="(order, index) in orderList" :key="index">
						<view class="card_header">
							<view>订单号：{{ order.orderNo }}</view>
							<view class="isFreight" v-if="order.status == 0" style="color: blue;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 1" style="color: orange;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 2" style="color: purple;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 3" style="color: green;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 4" style="color: red;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 5" style="color: #999999;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 6" style="color: magenta;">
								{{ order.status | orderStatusFilter }}
							</view>
							<view class="isFreight" v-else-if="order.status == 9" style="color: pink;">
								{{ order.status | orderStatusFilter }}
							</view>
						</view>
						<view class="card_body">
							<view class="card_body_top">
								<view class="top_right">
									<view class="top_right_item">下单时间：</view>
									<view>{{ order.createTime }}</view>
								</view>
								<view class="top_right">
									<view class="top_right_item">配送时间：</view>
									<view>{{ order.deliveryDate }}</view>
								</view>
								<view class="top_right">
									<view class="top_right_item">配送仓库：</view>
									<view>{{ order.deportName }}</view>
								</view>
							</view>
						</view>
						<!-- 商品信息 -->
						<view class="particulars_body">
							<view class="particulars_body_top" v-for="(item,index2) in order.orderDetailList"
								:key="index2">
								<!-- 渲染的图片 -->
								<image :src="item.image" mode="" class="top_left"></image>
								<!-- <view class="top_right">
									<view  class="top_right_weight">{{ item.productName }}</view>
									<view><span class="top_right_weight">商品售价：</span> <span>￥{{ item.price }}</span>
									</view>
									<view><span class="top_right_weight">商品规格：</span> <span>{{ item.sku }}</span>
									</view>
									<view><span class="top_right_weight">数量：</span>
										<span>{{ item.payNum }}{{item.specUnit ? (JSON.parse(item.specUnit).sellUnit || '') : ''}}</span>
									</view>
								</view> -->
								<view class="top_right">
									<view class="top_right_weight">{{ item.productName }}</view>
									<view><span>单价：</span>
										<span
											class="top_right_weight">￥{{ item.price }}/{{item.specUnit ? (JSON.parse(item.specUnit).sellUnit || '') : ''}}</span>
									</view>
									<view><span>数量：</span>
										<span
											class="top_right_weight">{{ item.payNum }}{{item.specUnit ? (JSON.parse(item.specUnit).sellUnit || '') : ''}}</span>
									</view>
								</view>
							</view>

						</view>
						<!--  -->
						<view class="particulars_footer">
							<view class="particulars_foote_top">
								共1件商品，预计收入<span>￥22</span></view>
						</view>
						<!-- 条件信息 -->
						<view class="card_footer">
							<button class="bg_color"
								style="padding: 6px 15px;color: white;border-radius: 50px;width: 100px;height: 34px; margin-right: 10px;"
								@click="goParticulars(order.orderNo)">查看详情</button>
							<button
								style="padding: 6px 15px;color: white;border-radius: 50px; width: 100px;height: 34px;"
								class="bg_color" @click="orderSendClick(order.orderNo)"
								v-if="(order.status === 1 || order.status === 2) && parseFloat(order.refundStatus) < 3">去发货</button>
						</view>
					</view>

				</view>

				<!--  -->
				<u-empty v-if="!orderList.length" style="padding-top:  50%;"
					icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				<uni-load-more v-else :status="moreStatus"></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {
		orderListApi,
	} from '@/api/order.js'
	import {
		setThemeColor
	} from '../../../utils/setTheme.js'
	import {
		orderStatusFilter,
		payTypeFilter
	} from "../utils/filter.js"
	import {
		queryDepotInformationApi
	} from "@/api/qualityTest.js"
	let app = getApp()
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				keyword: '',
				params: {
					page: 1,
					limit: 10,
					orderNo: '',
					status: '',
					dateLimit: '',
				},
				orderList: [],
				moreStatus: 'more',
				index: 0,
				arrayPicker: [{
					name: "全部",
					value: "all"
				}, {
					name: "待发货",
					value: "notShipped"
				}, {
					name: "待收货",
					value: "spike"
				}, {
					name: "已完成",
					value: "complete"
				}, {
					name: "已取消",
					value: "deleted"
				}],
				indexDate: 0,
				arrayDate: [{
						name: '全部日期',
						value: ''
					},
					{
						name: '今天',
						value: 'today'
					},
					{
						name: '昨天',
						value: 'yesterday'
					},
					{
						name: '最近7天',
						value: 'lately7'
					},
					{
						name: '最近30天',
						value: 'lately30'
					},
					{
						name: '本月',
						value: 'month'
					},
					{
						name: '本年',
						value: 'year'
					}
				],
				isTime1: true,
				isTime2: false,
				pickerShow: true,
				dateShow: true,

				// ---------------------仓库搜索----------------------------
				isWarehouse: true, // 仓库方式展示
				warehouseIndex: 0, // 验收索引值
				// 仓库搜索测试数据
				// 仓库信息
				warehouseList: [{
						depotName: '全部',
						value: -1
					},
					{
						depotName: '大兴仓',
						value: 1
					},
					{
						depotName: '大兴仓2',
						value: 2
					},
					{
						depotName: '大兴仓3',
						value: 3
					},
				],
				warehouseShow: true, // 验收列表显示


			}
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getOrderList(true);
			this.getQueryDepotInformation()

		},
		// 过滤器
		filters: {
			orderStatusFilter, // 订单状态
			payTypeFilter
		},
		created() {
			uni.$on("orderFun", this.getOrderList)
		},
		destroyed() {
			uni.$off("orderFun", this.getOrderList)
		},
		methods: {
			// -------------------关于搜索仓库事件------------------------------
			// 仓库搜索事件
			warehouseChange(e) {
				this.isWarehouse = false
				this.warehouseIndex = e.detail.value
				this.warehouseShow = true
				this.params.depotId = this.warehouseList[this.warehouseIndex].depotId
				if (this.params.depotId == -1) {
					delete this.params.depotId
				}
				this.getOrderList()

			},
			// 仓库取消事件
			warehouseCancel() {
				this.warehouseShow = true
			},
			// 仓库点击事件
			warehouseClick() {
				this.warehouseShow = false
			},
			// 订单状态的颜色
			getStatusColor(status) {
				let color;
				if (status == 0) {
					color = 'color: blue;';
				} else if (status == 1) {
					color = 'color: orange;';
				} else if (status == 2) {
					color = 'color: purple;';
				} else if (status == 3) {
					color = 'color: green;';
				} else if (status == 4) {
					color = 'color: red;';
				} else if (status == 5) {
					color = 'color: #999999;';
				} else if (status == 6) {
					color = 'color: magenta;';
				} else if (status == 9) {
					color = 'color: pink;';
				} else {
					color = 'color: black;';
				}

				return color;
			},
			// 滚动事件
			scrollHandle() {
				if (this.moreStatus == 'more') {
					this.params.page++
					this.getOrderList(true)
				}
			},



			// 去发货
			orderSendClick(orderNo) {
				uni.navigateTo({
					url: `/pages/orderDetail/shipments/shipments?orderNo=${orderNo}`,
				});
			},
			// 搜索
			searchProduct(val) {
				this.params.orderNo = val
				this.getOrderList()
			},
			// 跳转到订单详情页
			goParticulars(orderNo) {
				uni.navigateTo({
					url: `/pages/orderDetail/particulars/particulars?orderNo=${orderNo}`,
				});
			},

			// 下拉收获方式菜单
			bindPickerChange(e) {
				this.index = e.detail.value
				this.pickerShow = true
				this.params.status = this.arrayPicker[this.index].value
				this.getOrderList()
			},
			cancel() {
				this.pickerShow = true
				this.dateShow = true
			},

			clickPicker() {
				this.pickerShow = false
			},
			// 下拉时间菜单
			bindDateChange(e) {
				this.isTime1 = false
				this.isTime2 = true
				this.indexDate = e.detail.value
				this.dateShow = true
				this.params.dateLimit = this.arrayDate[this.indexDate].value
				this.getOrderList()
			},
			clickDate() {
				this.dateShow = false
			},
			// -------------------------------api接口---------------------------------
			// 获取订单列表的功能函数
			async getOrderList(status) {
				console.log("status", status)
				if (!status) {
					this.orderList = []
					this.params.page = 1;
					this.params.limit = 10;
				}
				try {
					this.moreStatus = 'loading'
					let result = await orderListApi(this.params)
					if (result.code == 200) {
						let items = result.data.list
						if (items.length > 0) {
							if (result.data.totalPage == this.params.page) {
								this.moreStatus = 'noMore'
							} else {
								this.moreStatus = 'more'
							}
							this.orderList.push(...items)

						} else {
							this.moreStatus = 'noMore'
						}
					} else {
						uni.showToast({
							title: result.message,
							icon: 'none',
							duration: 2000
						})
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			},
			// 获取仓库列表
			async getQueryDepotInformation() {
				try {
					let result = await queryDepotInformationApi()

					this.warehouseList = result.data.list
					this.warehouseList.unshift({
						depotId: -1,
						depotName: '全部'
					})
				} catch (e) {
					//TODO handle the exception
					this.$util.Tips({
						title: e
					})
					console.log(e)
				}
			},

		},

	}
</script>
<style lang="scss">
	page {
		height: 100%;


	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		margin-bottom: 10px;
	}

	.content {
		flex: 1;
		overflow: hidden;
	}

	.scroll-view {
		height: 100%;
	}

	.scroll-view-inner {
		.card {
			background-color: #fff;
			margin: 0 10px;
			margin-bottom: 10px;
			border-radius: 10px;
			padding: 20px;

			.card_header {
				display: flex;
				justify-content: space-between;
				padding-bottom: 20px;
				border-bottom: 1rpx solid #eee;

				.isFreight {
					color: #4583d6;
				}
			}

			.card_body {
				.card_body_top {
					font-size: 15px;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #eee;

					.top_right {
						height: 22px;
						display: flex;

						.top_right_item {
							// margin-right: 10px;
						}
					}
				}
			}

			// 商品信息
			.particulars_body {
				.particulars_body_top {
					padding: 10rpx 0;
					display: flex;
					border-bottom: 1px solid #eee;

					.top_left {
						width: 70px;
						height: 70px;
						margin-right: 15px;
						flex-shrink: 0;
					}

					.top_right {
						font-size: 15px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						view {
							line-height: 20px;
						}

						.top_right_weight {
							font-weight: bold;
						}
					}

				}


			}

			.particulars_footer {
				text-align: right;
				padding: 10px;

				.particulars_foote_top {
					font-size: 16px;
					margin-bottom: 10px;
					font-weight: bold;
				}
			}

			.card_footer {
				display: flex;
				justify-content: flex-end;
				// margin-left: 130px;
			}
		}
	}
</style>